<template>
	<up-loading-page bgColor="#ffffff" :loading="loading" loading-mode="spinner"></up-loading-page>
	<view style="background: #e3e3e3;" v-if="!loading">
		<view style="padding: 20rpx;">
			<view class="enlightenment_nav">
				<view style="margin-top: 20rpx; margin-right: 20rpx;width: 80vw;">
					<view class="spacer" style="height: 20rpx;"></view>
					<up-text :bold="true" size=30 :text="book.name"></up-text>
					<view class="spacer" style="height: 30rpx;"></view>
					<up-text size=18 :text="`${book.username}著`"></up-text>
					<view class="spacer" style="height: 5rpx;"></view>
					<up-text size=18 :text="`${book.publish}`"></up-text>
					<view class="spacer" style="height: 40rpx;"></view>
					<view style="height: 50rpx;width: 300rpx;background: linear-gradient(to right, #fffdfd, #e3e3e3);">
						<up-text size=18 text="详细书籍信息>>>"></up-text>
					</view>
				</view>
				<view style="margin-top: 20rpx;margin-right: 20rpx;width: 40%;">
					<up-image style="margin-top: 10rpx;" width="220rpx" height="300rpx" radius="20rpx"
						:show-loading="true" :src="book.url"></up-image>
				</view>
			</view>
			<view class="spacer" style="height: 70rpx;"></view>
			<view style="display: flex;align-items: center;">
				<view class="item">
					<up-text align="center" size=18 :bold="true" :text="bookData.totalCollection"></up-text>
					<up-text type="info" align="center" text="总馆数量"></up-text>
				</view>
				<up-line length="100rpx" color="#a7a7a7" direction="col"></up-line>
				<view class="item">
					<up-text align="center" size=18 :bold="true" :text="bookData.inPavilion"></up-text>
					<up-text type="info" align="center" text="在馆(本)"></up-text>
				</view>
				<up-line length="100rpx" color="#a7a7a7" direction="col"></up-line>
				<view class="item">
					<up-text color="#000" size=18 :bold="true" align="center" :text="bookData.outNumber"></up-text>
					<up-text type="info" align="center" text="借出(本)"></up-text>
				</view>
			</view>
			<view class="nav_bot">

			</view>
			<view class="nav_bot">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				// 书籍列表
				book: {},
				// 数字数列
				bookData: {
					id: 1,
					bookId: 1,
					totalCollection: 6,
					inPavilion: 2,
					outNumber: 4
				}
			}
		},
		methods: {
			getBook(id) {
				this.loading = true; // 显示加载状态
				uni.request({
					url: 'http://localhost:8080/app/api/v1/index/getBook',
					method: 'GET',
					data: {
						id: id
					},
					success: (res) => {
						console.log(res.data);
						var code = res.data.code;
						if (code == 200) {
							setTimeout(() => {
								this.loading = false; // 隐藏加载状态
							}, 2000);
							this.book = res.data.data;
						}
					}
				});
			}
		},
		onLoad: function(option) {
			console.log(option.id);
			var id = option.id;
			this.getBook(id);
		}
	}
</script>

<style lang="scss">
	.spacer {
		background-color: transparent;
	}

	.enlightenment_nav {
		display: flex;
		margin-left: 20rpx;
	}

	.item {
		// background-color: #000000;
		width: 340rpx;
		height: 105rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}

	.nav_bot {
		margin-top: 30rpx;
		height: 30vh;
		background: #ffffff;
		border-radius: 20rpx;
	}
</style>